<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>
    <el-form label-width="120px">

  <el-form-item label="课程标题">
    <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
  </el-form-item>
  <!-- 所属分类 TODO -->
  <el-form-item label="课程分类">
      <!-- 一级分类 -->
    <el-select
        v-model="courseInfo.subjectParentId"
        placeholder="一级分类" @change="subjectTwoChange">
        <el-option
        v-for="subject in subjectOneList"
        :key="subject.id"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>

    <!-- 二级分类 -->
    <el-select
        v-model="courseInfo.subjectId"
        placeholder="二级分类" >
        <el-option
        v-for="subject in subjectTwoList"
        :key="subject.id"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>
</el-form-item>


  <!-- 课程讲师 TODO -->

  <el-form-item label="课程讲师">
  <el-select
    v-model="courseInfo.teacherId"
    placeholder="请选择">
    <el-option
      v-for="teacher in teacherList"
      :key="teacher.id"
      :label="teacher.name"
      :value="teacher.id"/>
  </el-select>
</el-form-item>

  <el-form-item label="总课时">
    <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
  </el-form-item>

  <!-- 课程简介 TODO -->
  <el-form-item label="课程简介">
    <tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

  <!-- 课程封面 TODO -->
  <!-- 课程封面 -->
  <el-form-item label="课程封面">
    <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :action="BASE_API+'/eduOss/fileOss'"
        class="avatar-uploader">
        <img :src="courseInfo.cover">
    </el-upload>
</el-form-item>

  <el-form-item label="课程价格">
    <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
  </el-form-item>

  <el-form-item>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>

import course from '@/api/course/course'
import subject from '@/api/subject/subject'
import Tinymce from '@/components/Tinymce'
export default {
     components: { Tinymce },//声明组件

    data() {
        return {
            saveBtnDisabled:false,
            courseInfo:{
                title:'',
                lessonNum:'',
                descrpition:'',
                price:'',
                subjectParentId:'',
                subjectId:'',
                teacherId:'',
                cover:'/static/谭松韵.jpg'
            },
            BASE_API: process.env.BASE_API,
            teacherList:[],
            subjectOneList:[],
            subjectTwoList:[]
        }
    },

    created(){
        this.getAllTeacher()

        this.getAllSubject()
    },
    

    methods:{
        //上传成功之后调用的方法
        handleAvatarSuccess(res,file){
            this.courseInfo.cover =res.data.url
        },
        //上传成功之前调用的方法（可以用来校验图片大小格式等等，也可以不用）
        beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg'
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
        },
        subjectTwoChange(value){
            for(var i = 0;i<this.subjectOneList.length;i++){
                if(this.subjectOneList[i].id === value){
                    this.subjectTwoList = this.subjectOneList[i].children 
                    this.courseInfo.subjectId = ''
                }
            }
        },
        
        //获取所有分类
        getAllSubject(){
            subject.subjectList()
                .then(response =>{
                    this.subjectOneList = response.data.list
                })
        },
        //获取所有讲师
        getAllTeacher(){
            course.getAllTeacher().then(response =>{
                this.teacherList=response.data.items
            })
        },
        //跳转到第二个页面
        saveOrUpdate(){
            course.addCoureseInfo(this.courseInfo).then(response =>{
                this.$message({
                    type:'success',
                    message:'添加课程成功'
                });
                this.$router.push({path:'/course/chapter/'+response.data.courseId})
            })
        }
    }
    
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>